<template>
  <view class="page">
    <view class="top">
      <view class="top-1 flex">
        <view class="top-1-1">开票金额</view>
        <view class="top-1-1">￥{{ totalPrice || '0' }}</view>
      </view>
    </view>
    <view class="box">
      <u-form :model="form" :rules="rules" ref="uForm" class="u-form">
        <u-form-item label="发票信息" prop="type" labelWidth="70">
        </u-form-item>
        <u-form-item label="发票类型" prop="invoice_type" borderBottom required labelWidth="70">
          <u-radio-group v-model="form.invoice_type" placement="row" @change="groupChange">
            <u-radio v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.value"
              activeColor="#FFBB50" labelSize="13">
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="发票抬头" prop="look_up" borderBottom required labelWidth="70">
          <u-input v-model="form.look_up" border="none" placeholder="请输入发票抬头"></u-input>
        </u-form-item>
        <u-form-item label="企业名称" prop="company_name" borderBottom labelWidth="70" required>
          <u-input v-model="form.company_name" border="none" placeholder="请输入企业名称"></u-input>
        </u-form-item>
        <u-form-item label="企业税号" prop="tax_id" borderBottom labelWidth="70" required>
          <u-input v-model="form.tax_id" border="none" placeholder="请输入企业税号"></u-input>
        </u-form-item>
        <u-form-item label="开票内容" prop="invoice_content" borderBottom labelWidth="70" required>
          <u-input v-model="form.invoice_content" border="none" type="number" placeholder="请输入开票内容"></u-input>
        </u-form-item>
        <u-form-item label="企业地址" prop="enterprise_address" borderBottom labelWidth="70" required>
          <u-input v-model="form.enterprise_address" border="none" placeholder="请输入企业营业地址"></u-input>
        </u-form-item>
        <u-form-item label="企业电话" prop="enterprise_phone" borderBottom labelWidth="70" required>
          <u-input v-model="form.enterprise_phone" border="none" placeholder="请输入企业电话"></u-input>
        </u-form-item>
        <u-form-item label="开户银行" prop="opening_bank" borderBottom labelWidth="70" required>
          <u-input v-model="form.opening_bank" border="none" placeholder="请输入企业开户行"></u-input>
        </u-form-item>
        <u-form-item label="开户账号" prop="account_opening" borderBottom labelWidth="70" required>
          <u-input v-model="form.account_opening" border="none" placeholder="请输入企业开户行账号"></u-input>
        </u-form-item>
        <view class="kk"></view>
        <u-form-item label="联系方式" prop="type" labelWidth="70">
          <span class="tt">若开具发票，请至少填写一项</span>
        </u-form-item>
        <u-form-item label="邮箱地址" prop="email" labelWidth="70" borderBottom>
          <u-input v-model="form.email" border="none" placeholder="请输入邮箱地址"></u-input>
        </u-form-item>
        <u-form-item label="手机号码" prop="phone" labelWidth="70">
          <u-input v-model="form.phone" border="none" placeholder="请输入手机号码" type="number"></u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="tip">您的交易信息将严格保密，仅用于开具发票</view>
    <view class="kong" style="height: 300rpx;"></view>
    <view class="bottom flex">
      <view class="btn" @click="handleSub">提交申请</view>
    </view>
    <u-picker :show="show" :columns="columns" keyName="name" @confirm="confirm" @cancel="handleclose"
      closeOnClickOverlay immediateChange="true"></u-picker>
  </view>
</template>
<script>
import { invoicing } from "@/utils/request.js";
export default {
  data() {
    return {
      form: {
        invoice_type: 2
      },
      rules: {
        company_name: [
          {
            type: "string",
            required: true,
            message: "请填写公司名称",
            trigger: ["blur", "change"],
          },
        ],
        look_up: [
          {
            type: "string",
            required: true,
            message: "请填写发票抬头",
            trigger: ["blur", "change"],
          },
        ],
        tax_id: [
          {
            type: "string",
            required: true,
            message: "请填写企业税号",
            trigger: ["blur", "change"],
          },
        ],
        invoice_content: [
          {
            type: "string",
            required: true,
            message: "请填写开票内容",
            trigger: ["blur", "change"],
          },
        ],
        enterprise_address: [
          {
            type: "string",
            required: true,
            message: "请填写企业地址",
            trigger: ["blur", "change"],
          },
        ],
        enterprise_phone: [
          {
            type: "string",
            required: true,
            message: "请填写企业电话",
            trigger: ["blur", "change"],
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // uni.$u.test.mobile()就是返回true或者false的
              return uni.$u.test.mobile(value);
            },
            message: "手机号码不正确",
            // 触发器可以同时用blur和change
            trigger: ["change", "blur"],
          },
        ],
        opening_bank: [
          {
            type: "string",
            required: false,
            message: "请填写开户行",
            trigger: ["blur", "change"],
          },
        ],
        account_opening: [
          {
            type: "string",
            required: false,
            message: "请填写开户账号",
            trigger: ["blur", "change"],
          },
        ],
      },
      show: false,
      radiolist1: [
        { name: "普票", value: 2 },
        { name: "增票", value: 1 },
      ],
      list: [],
      totalPrice: 0
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  onLoad(option) {
    if (option.data) {
      this.list = JSON.parse(option.data)
      this.totalPrice = option.totalPrice
    }
  },
  methods: {
    async invoicing(data) {
      return await invoicing(data)
    },
    handleclose(e) {
      this.show = !this.show;
    },
    groupChange(e) {
      this.form.type = e;
    },
    groupChangeWay(e) {
      this.form.way = e;
      this.$refs.uForm.setRules(this.dynamicRules());
      this.$forceUpdate();
    },
    confirm(e) {
      this.form.type_zj = e.value[0].name;
      this.show = false;
    },
    handleNav(url) {
      uni.navigateTo({ url: url });
    },
    handleSub() {
      this.$refs.uForm.validate().then(res => {
        this.form.order_data = this.list
        this.invoicing(this.form).then(res => {
          if (res) {
            uni.showToast({
              title: '操作成功',
              icon: 'success',
              mask: true
            })
            setTimeout(() => {
              uni.navigateBack({ delta: 1 })
            }, 1500)
          }
        })
      }).catch((err) => {

      })
    },
  },
};
</script>
<style lang="scss" scoped>
.tip {
  width: 100%;
  color: #555555;
  text-align: center;
  font-size: 25rpx;
  margin: 17rpx auto 0;
}

.kk {
  width: 100%;
  height: 28rpx;
  background: #f2f2f2;
}

::v-deep .u-form {
  width: 694rpx !important;
  margin: 0 auto;

  text {
    font-size: 25rpx;
  }

  .u-input {
    background: transparent !important;
    font-size: 26rpx !important;
  }

  .u-radio {
    margin-right: 12rpx;
    font-size: 27rpx;
  }

  .u-form-item__body__left__content__required {
    top: 0;
  }
}

::v-deep .u-action-sheet {
  button {
    font-size: 30rpx !important;
  }
}

.tt {
  font-size: 23rpx;
  color: #ffbb50;
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  justify-content: flex-end;
  height: 124rpx;
  background: #ffffff;
  align-items: center;

  .bottom-btn {
    width: 176rpx;
    height: 68rpx;
    border-radius: 132rpx;
    background: #ffbb50;
    line-height: 68rpx;
    text-align: center;
    color: #ffffff;
    font-size: 25rpx;
    margin-right: 26rpx;
  }
}

.box {
  width: 100%;
  background: #ffffff;
  margin-top: 24rpx;
}

.top {
  width: 100%;
  padding: 26rpx 0;
  background: #ffffff;

  .top-1 {
    justify-content: space-between;
    width: 694rpx;
    margin: 0 auto;

    .top-1-1 {
      font-size: 25rpx;
    }
  }
}
</style>